<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding: 0; margin: 0; box-sizing: border-box;}
    body{ background-color: #000; transform-style: preserve-3d;}
    .cont{width: 800px; height: 800px; margin: 150px auto; transform-style: preserve-3d; }
    .box{width: 200px; height: 200px;  transform-style: preserve-3d; transition: 1s; transform: perspective(1000px) rotateY(0deg);}
    .box span{user-select: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-origin: center; transform-style: preserve-3d; transform: rotateY(calc(var(--i) * 45deg)) translateZ(300px); -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0,0,0,.2));}
    .box span img{user-select: none; width: 100%; height: 100%; position:absolute; left: 0; top: 0; object-fit: cover;}
    .fx{ width: 100%; display: flex; justify-content: center; align-items: center; width: 200px; margin: 50px 0;}
    .fx span{ display: block; width: 50px; text-align: center; line-height: 50px; height: 50px; background-color: #fff; border-radius: 50%; margin: 50px auto; cursor: pointer; border: 1px solid #fff;}
</style>
<body>
    <div class="cont">
        <div class="box">
            <span style="--i:1"><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span style="--i:2"><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span style="--i:3"><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span style="--i:4"><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span style="--i:5"><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span style="--i:6"><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span style="--i:7"><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span style="--i:8"><img src="pexels-photo-17975892.jpeg" alt=""></span>
            <span style="--i:9"><img src="pexels-photo-17975892.jpeg" alt=""></span>
        </div>
        <div class="fx">
             <span class="prev"> < </span>
             <span class="next"> > </span>
        </div>
    </div>
    <script>
        var box = document.querySelector('.box');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        let degreen = 0;
        prev.addEventListener('click', function(){
            clearInterval(timer);
            degreen -= 36;
            box.style = `transform: perspective(1000px) rotateY(${degreen}deg)`;
        })
        next.addEventListener('click', function(){
            clearInterval(timer);
            degreen += 45;
            box.style = `transform: perspective(1000px) rotateY(${degreen}deg)`;
        })
        timer = setInterval(()=>{
            degreen += 45;
            box.style = `transform: perspective(1000px) rotateY(${degreen}deg)`;
        },2000)
        let LastX;
        let LastY;
        box.addEventListener('touchstart', function(e){
            LastX = e.touches[0].clientX;
            LastY = e.touches[0].clientY;
            clearInterval(timer);
        })
        box.addEventListener('touchmove', function(e){
           clearInterval(timer);
           var x = e.touches[0].clientX;
           var y = e.touches[0].clientY;
           let moveX = x - LastX;
           let moveY = y - LastY;
           if(moveX > 100){
              console.log('right');
              degreen += 45;
              box.style = `transform: perspective(1000px) rotateY(${degreen}deg)`;
           }else if( moveX > -100 & moveX < 0){
              degreen -= 45;
              box.style = `transform: perspective(1000px) rotateY(${degreen}deg)`;
              console.log('left');
           }
        })
    </script>
</body>
</html> 